<template>
  <div class="content">
    <div class="header" v-for="(item, index) in data.userData" :key="data.userData">
      <div class="avatar-image">
        <el-avatar class="img" :size="65" :src="item.avatar" />
      </div>
      <div class="avatar-text">
        <div class="name">
          {{ item.userName }}
        </div>
        <div class="welcome-statement">
          欢迎来到海产品管理系统~🎇
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="middle-content">
        <div class="all-text">
          <div class="text"> 全部类别数</div>
          <div><el-text class="mx-1" type="primary">总数</el-text></div>
        </div>
        <div class="number">{{ data.categoryNum }}</div>
      </div>
      <div class="middle-content">
        <div class="all-text">
          <div class="text"> 全部产品数</div>
          <div><el-text class="mx-1" type="danger">总数</el-text></div>
        </div>
        <div class="number">{{ data.productNum }}</div>
      </div>
      <div class="middle-content">
        <div class="all-text">
          <div class="text"> 全部订单数</div>
          <div><el-text class="mx-1" type="success">总数</el-text></div>
        </div>
        <div class="number">{{ data.orderNum }}</div>
      </div>
      <div class="middle-content">
        <div class="all-text">
          <div class="text"> 全部用户数</div>
          <div><el-text class="mx-1" type="info">总数</el-text></div>
        </div>
        <div class="number">{{ data.userNum }}</div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-left">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>信誉积分变化明细</span>
            </div>
          </template>
          <el-empty description="暂无数据" />
        </el-card>
      </div>
      <div class="footer-right">
        <div class="calendar-list"><el-calendar v-model="value" style="height: 200px;" /></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useUserStore } from '../../store/user.js'
import { GiveFormData, GetDetailUserData } from '../../api/user.js'
import { storeToRefs } from 'pinia'


// 用户信息
const data = reactive({
  userData: [],
  categoryNum: '',
  productNum: '',
  orderNum:'',
  userNum:''
})


const userStore = useUserStore()
// const {userInfo}=storeToRefs(userStore)
// console.log(userInfo);
// console.log(userInfo);
// console.log(userStore.userInfo.name);
console.log(userStore.categoryNum);




// 日期表
const value = ref(new Date())


// 获取存储在本地的用户id
onMounted(async () => {
  await GetDetailUserData({
    user_id: localStorage.getItem('user_id')
  }).then(res => {
    console.log(res);
    data.userData = res.data
    console.log(data.userData);

    //类别数量
    userStore.GetCategory().then(() => {
      data.categoryNum = userStore.categoryNum
    })

    //产品数量    
    userStore.GetproductList().then(() => {
      data.productNum = userStore.productNum
    })

    // 订单数量
    userStore.GetShowCountList().then(() => {
      data.orderNum = userStore.orderNum
    })

    // 用户的数量
    userStore.GetUserData().then(() => {
      data.userNum = userStore.userNum
    })

  })
})




</script>

<style>
.el-calendar-table .el-calendar-day {
  width: 10px !important;
  height: 40px !important;
}

.el-scrollbar__wrap {
  overflow: hidden;
}

/* .el-calendar__body {
  height: 400px;
} */
</style>
<style lang="less" scoped>
.content {
  // height: 100%;
  // width: 100%;
  padding: 5px;
  overflow: hidden;
}

.header {
  width: 100%;
  height: 80px;
  border: 1px solid #ffffff;
  margin-top: 5px;
  display: flex;
  border-radius: 5px;
  /* 圆角 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  /* 好看的阴影效果 */


  .avatar-image {
    height: 100%;
    text-align: center;

    .img {
      display: block;
      margin: 5px auto;
    }
  }


  .avatar-text {
    height: 100%;
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .welcome-statement {
      margin-top: 10px;
    }
  }
}

.middle {
  height: 120px;
  width: 100%;
  // border: 1px solid red;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .middle-content {
    height: 100%;
    width: 300px;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 15px;
    border-radius: 5px;
    /* 圆角 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);

    /* 好看的阴影效果 */
    .all-text {
      display: flex;
      justify-content: space-between;
      // align-items: ;
      font-size: 15px;
      font-weight: 100;
    }

    .number {
      font-size: 20px;
      font-weight: bold;
    }
  }
}

.footer {
  height: 380px;
  width: 100%;
  // border: 1px solid red;
  display: flex;
  margin-top: 30px;
  padding: 5px;
  justify-content: space-around;

  .footer-left {
    height: 350px;
    width: 48%;
    // border: 1px solid black;
  }

  .footer-right {
    height: 380px;
    width: 48%;
    // border: 1px solid black;
    border-radius: 5px;
    /* 圆角 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);

    /* 好看的阴影效果 */
    .calendar-list {}
  }

}
</style>